<template>
	<router-layout>
	<div class="pageBg">
		<van-loading color="#1989fa" type="spinner"  class="Load" v-if="loading" />
		<div class="bodymain" v-else>
			<div v-show="timeout" @click="timeOutGet">
				<van-empty  type="network" image-size="170" description="网络超时点此处重新获取"  class="noData" />
			</div>
			<van-empty  image-size="170" description="暂无订单"  class="noData"  v-if="!hasdata"/>
			<div v-else>
				<div class="orderbox" v-for="item,index in orderList" :key="index">
					<div class="itemtop">
						<div>
							<img src="@/assets/images/searchBus/bus.png"/>
						</div>
						<div class="time">
							<span v-show="item.status == 1">
								剩余
								<span>
									<van-count-down 
									  :ref="'count' + index"
										class="countTime" 
										:auto-start="true" 
										:time="time - (new Date().getTime() - item.create_time * 1000) " 
										format="mm 分 ss 秒"
										@finish="finish(item)" 
									/>
								</span>
							</span>
							<span class="paytype" v-show="item.status == 1">待支付</span>
							<span class="paytype disabled" v-show="item.status == 2">已失效</span>
							<span class="paytype" v-show="item.status == 3">支付中</span>
							<span class="paytype" v-show="item.status == 4">已支付</span>
							<span class="paytype" v-show="item.status == 5">支付失败</span>
							<span class="paytype" v-show="item.status == 6">退款中</span>
							<span class="paytype" v-show="item.status == 7">退款异常</span>
							<span class="paytype" v-show="item.status == 8">退款成功</span>
						</div>
					</div>
					<div class="line top"></div>
					<div class="orderitem">
						<div class="itemL">订单号：</div>
						<div class="itemR">{{item.order_number}}</div>
					</div>
					<div class="orderitem">
						<div class="itemL">出发：</div>
						<div class="itemR">{{item.station_name}}</div>
					</div>
					<div class="orderitem">
						<div class="itemL">到达：</div>
						<div class="itemR">{{item.stop_name}}</div>
					</div>
					<div class="orderitem orderfl">
						<div class="detail_l">
							<div class="itemL">出发时间：</div>
							<div class="itemR">{{item.depart_date}}</div>
						</div>
						<div class="orderDetail" @click="getOrderDetail(item)">
							订单详情 >
						</div>
					</div>
					<div class="line bottom"></div>
					<div class="bth">
						<div class="orderprice">
							¥ {{(item.total_price/100).toFixed(2)}}
						</div>
						<div>
							<van-button class="cancle" v-show="item.status == 2" @click="cancleOrder(item)">删除订单</van-button>
							<van-button class="cancle" v-show="item.status == 1" @click="cancleOrder(item)">取消订单</van-button>
							<van-button class="pay" v-show="item.status == 1" @click="pay(item)">立即支付</van-button>
							<van-button class="pay" v-show="item.status == 4" @click="reTicket(item)">申请退票</van-button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 订单详情弹窗 -->
	<van-popup
		v-model="show" 
		class="orderpop" 
	>
		<div class="popt">订单详情</div>
		<div class="popb">
			<div class="detailitem">
				<span class="iteml">订单号:</span><span>{{orderDetail.order_number}}</span>
			</div>
			<!-- <div class="detailitem">
				<span class="iteml">车次:</span><span>6031</span><span class="bus">大高一</span>
			</div> -->
			<div class="detailitem">
				<span class="iteml">出发:</span><span>{{orderDetail.station_name}}</span>
			</div>
			<div class="detailitem">
				<span class="iteml">到达:</span><span>{{orderDetail.stop_name}}</span>
			</div>
			<div class="detailitem">
				<span class="iteml">出发时间:</span><span>{{orderDetail.depart_date}}</span>
			</div>
			<div class="detailitem altop">
				<div class="pass">
					乘客:
				</div>
			  <div class="passengers">
					<ul>
						<li v-for="item,index in orderDetail.orderdetails">
							<div>{{item.name}} <span class="type tag" v-show="item.ticket_type == 1">全票</span><span class="type tag" v-show="item.ticket_type == 2">半票</span><span class="seat tag">座位号<span class="seatnum">{{item.seat_no}}</span></span></div>
							<div class="card">身份证 {{formatIdcard(item.id_card)}}</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="detailitem">
				<span class="iteml">联系人:</span><span>{{orderDetail.phone}}</span>
			</div>
			<div class="detailitem">
				<span class="iteml">购票时间:</span><span>{{formatCreate_Time}}</span>
			</div>
		</div>
	</van-popup>
	</router-layout>
</template>

<script>
	import authMixin from '@/mixin/mixin'
	import { wexinPay } from "@/utils/wx-sdk"
	export default {
		data() {
			return {
				time: 600000, //订单超时时间
				show:false,   //订单详情弹窗
				timeout:false,
				hasdata:true,
				loading:true,
				orderList:[],
				orderDetail:{
					order_number:'',
					station_name:'',
					stop_name:'',
					depart_date:'',
					create_time:'',
					phone:'',
					orderdetails:[
						{
							name:'',
							seat_no:'1',
							ticket_type:1,
							id_card:''
						}
					]
				}
			}
	  },
		mixins:[authMixin],
		created(){
			this.getOrderList()
		},
		mounted(){
			
		},
		computed:{
		   formatCreate_Time(){
				 let creat_year = new Date(this.orderDetail.create_time * 1000 ).getFullYear()
				 let creat_month = new Date(this.orderDetail.create_time * 1000 ).getMonth()+1
				 let creat_date = new Date(this.orderDetail.create_time * 1000 ).getDate()
				 let creat_hour = new Date(this.orderDetail.create_time * 1000 ).getHours()
				 let creat_min = new Date(this.orderDetail.create_time * 1000 ).getMinutes()
				 let creat_second = new Date(this.orderDetail.create_time * 1000 ).getSeconds()
				 if(creat_month <= 9){
					 creat_month = '0' + creat_month
				 }
				 if(creat_date <= 9){
				 		creat_date = '0' + creat_date
				 }
				 if(creat_hour <= 9){
				 		creat_hour = '0' + creat_hour
				 }
				 if(creat_min <= 9){
				 		creat_min = '0' + creat_min
				 }
				 if(creat_second <= 9){
				 		creat_second = '0' + creat_second
				 }
				 let create_time = `${creat_year}-${creat_month}-${creat_date}  ${creat_hour}:${creat_min}:${creat_second}`
				 return  create_time 
			 },
			 formatIdCard(val){
				 return val.substr(0,6) + '****' + val.substring(val.length-5)
			 }
		},
		methods:{
			formatIdcard(idcard){
				return idcard.substr(0,6) + '****' + idcard.substring(idcard.length-5)
			},
			getOrderDetail(item){
				//订单详情
				this.show = true
				console.log(item)
				this.orderDetail.order_number = item.order_number
				this.orderDetail.station_name = item.station_name
				this.orderDetail.stop_name = item.stop_name
				this.orderDetail.depart_date = item.depart_date
				this.orderDetail.create_time = item.create_time
				this.orderDetail.phone = item.phone
				this.orderDetail.orderdetails = item.orderdetails
			},
			timeOutGet(){
				this.loading = true
				this.getOrderList()
			},
			getOrderList(){
				this.$request({
					method:'get',
					url:'/order/index'
				}).then(res=>{
					this.loading = false
					console.log(res.data)
					if(res.data && res.data.length){
						this.timeout = false
						this.hasdata = true
						this.orderList = res.data
					}else{
						this.orderList = []
						this.hasdata = false
					}
				}).catch(err=>{
					console.log(err)
					if(err.message.includes('timeout')){
						this.loading = false 
						this.timeout = true
					}
					
				})
			},
			cancleOrder(item){
				if(item.status == 1){
					this.$dialog.confirm({
					  message: '是否取消订单'
					}).then(()=>{
						this.$request({
							method:'post',
							url:'/order/cancel',
							data:{
								order_number: item.order_number,
								id: item.id
							}
						}).then(res=>{
							if(res.code == 200){
								this.$toast.success({
									message: '订单取消成功',
									forbidClick: true,
									duration: 300
								})
							}
							setTimeout(()=>{
								this.getOrderList()   
							},400)
						})
					})
					
				}else if(item.status == 2){
					this.$dialog.confirm({
					  message: '是否删除订单'
					}).then(()=>{
						this.$request({
							method:'post',
							url:'/order/cancel',
							data:{
								order_number: item.order_number,
								id: item.id
							}
						}).then(res=>{
							if(res.code == 200){
								this.$toast.success({
									message: '订单删除成功',
									forbidClick: true,
									duration: 300
								})
							}
							setTimeout(()=>{
								this.getOrderList()   
							},400)
						})
					})
					
				}
				
			},
			finish(item){
				//倒计时结束
				if((this.time - (new Date().getTime() - item.create_time * 1000)) < 0 && (this.time - (new Date().getTime() - item.create_time * 1000)) > -1000 ){
					setTimeout(()=>{
						this.getOrderList()  
					},400)
					console.log('失效')
				}
			},
			reTicket(item){
				//申请退票
				this.$dialog.confirm({
				  message: '是否申请退票'
				}).then(()=>{
					this.$request({
							method:'post',
							url:'/order/refund',
							data:{
								order_number: item.order_number
							}
					}).then(res=>{
							
					})
				})
			},
			pay(item){
				//支付
				this.$request({
						method:'post',
						url:'/order/pay',
						data:{
							order_number: item.order_number
						}
					}).then(res=>{
						console.log(res.data)
				  //调用封装的支付函数
				  wexinPay(res.data.config,res.data.pay).then(res=>{
				    console.log("支付成功")
						this.$router.replace('/paySuccess')
				  }).catch(err=>{
				    console.log("支付失败")
						this.$toast.fail({
							message: '支付失败',
							forbidClick: true,
							duration: 300
						})
				  })
				})
				
			}
		}
  }
</script>

<style scoped>
	.orderbox{
		margin-left: .3rem;
		margin-right: .3rem;
		border-radius: .1rem;
		padding-top: .1rem;
		padding-bottom: .4rem;
		background: #fff;
		margin-top: .3rem;
	}
	.orderitem{
		display: flex;
		padding: .15rem .3rem 0 .3rem;
		background: #fff;
		font-size: .35rem;
	}
	.orderbox .orderitem:nth-child(1){
		padding-top: 0;
	}
	.itemL{
		letter-spacing: .06rem;
		color: #999;
		margin-right: 0;
	}
	.itemR{
		font-size: .36rem;
	}
	.orderbox .line{
		border-bottom: 0.02667rem solid #ebedf0;
		margin-top: .2rem;
		margin-bottom: .2rem;
		margin-left: .3rem;
		margin-right: .3rem;
	}
	.bth{
		padding-top: .1rem;
		display: flex;
		height: .8rem;
		justify-content: space-between;
		padding-right: .3rem;
	}
	.bth>div{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: .25rem;
		height: 1rem;
		line-height: 1rem;
		text-align: center;
		border-radius: .1rem;
	}
	.pay{
		background: #ff8917;
		width: 2.5rem;
		height: .9rem;
		border-radius: .1rem;
		font-size: .32rem;
		color: #fff;
		border: none;
		outline: none;
		border: 1px solid #ff8917;
		margin-left: .2rem;
	}
	.cancle{
		background: transparent;
		width: 2.5rem;
		height: .9rem;
		border-radius: .1rem;
		font-size: .32rem;
		color: #999;
		border: none;
		outline: none;
		border: 1px solid #eee;
	}
	.time{
		background: #fff;
		text-align: center;
		font-size: .32rem;
	}
	.time span{
		margin-left: .1rem;
		font-size: .32rem;
	}
	.countTime{
		color: #FB5D57;
		display: inline-block;
	}
	.itemtop{
		padding: 0 .3rem;
		display: flex;
		justify-content: space-between;
	}
	.itemtop img{
		height: .4rem;
	}
	.itemtop >div{
		display: flex;
		height: .8rem;
		align-items: center;
	}
	.paytype{
		color:#FB5D57;
		padding-left: .35rem;
		font-size: .34rem;
	}
	.paytype.disabled{
		color:#ccc
	}
	.orderbox .line.top{
		margin-top: .1rem;
	}
	.orderprice{
		color: #FB5D57;
		font-size: .45rem;
		justify-content: flex-start !important; 
	}
	.line.bottom{
		margin-top: .25rem;
		margin-bottom: .1rem;
	}
	.Load{
		position: fixed;
		top:50%;
		left:50%;
		transform: translate(-50%, -50%);
		z-index: 100;
	}
	.noData{
	  position: absolute;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
	}
	.orderfl{
		display: flex;
		justify-content: space-between;
	}
	.orderDetail{
		color: #4088EE;
		font-size: .33rem;
	}
	.orderpop{
		background: #fff;
		width: 85%;
		height: 60%;
		border-radius: .15rem;
		box-sizing: border-box;
		overflow-y: hidden;
	}
	.popt{
		position: absolute;
		left:0;
		right: 0;
		top:0;
		z-index: 2;
		height: 1.5rem;
		font-size: .45rem;
		color: #fff;
		line-height: 1.5rem;
		text-align: center;
		background: url(~@/assets/images/searchBus/poptitle.png);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: bottom center;
	}
	.popb{
		position: absolute;
		left:0;
		right: 0;
		bottom: .35rem;
		top:1.5rem;
		z-index: 1;
		overflow-y: auto;
	}
	.detailitem{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: .36rem;
		padding: .28rem 0;
		margin: 0 .3rem;
		border-bottom: 0.02667rem solid #ebedf0;
  }
	.detailitem span{
		color: #9e9e9e;
	}
  .detailitem span.iteml{
		margin-right: .25rem;
		color: #333;
	}
	.pass{
		margin-right: .25rem;
		color: #333;
	}
	.passengers{
		color: #9e9e9e;
	}
	.altop{
		align-items: flex-start;
		padding-bottom: 0;
	}
	.tag{
		vertical-align: .05rem;
		margin: 0 .08rem;
		display: inline-block;
		border-radius: .05rem;
		padding: .03rem .2rem;
		font-size: .24rem;
	}
	.tag.type{
		color: #ccc;
		border: 1px solid #dcdcdc;
	}
	.tag.seat{
		color: #fff;
		border: 1px solid #438bf7;
		background: #438bf7;
	}
  .passengers .card{
		padding: .11rem 0 .3rem 0;
		font-size: .36rem;
	}
	.passengers li{
		font-size: .36rem;
	}
	.bus{
		margin-left: .2rem;
	}
	.orderfl .itemL{
		width: 2.1rem;
		float: left;
	}
	.orderfl .itemR{
		padding-top: .02rem;
		float: left;
	}
	.seatnum{
		margin-left: .05rem;
		color: #fff !important;
		font-size: .25rem !important;
	}
	.pageBg{
		padding-bottom: .3rem;
	}
	.orderfl .detail_l{
		display: flex;
		height: .43rem;
		align-items: center;
	}
	.orderfl .orderDetail{
		display: flex;
		height: .43rem;
		align-items: center;
	}
	.van-count-down{
		font-size: .32rem !important;
	}
</style>
